<template>
    <div class="NumberCenter">
        <van-nav-bar title="会员中心" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="Head">
            <div class="Head-img">
                <img :src="avator" alt="">
            </div>
            <div class="Head-name">
                <b>您好，尊敬的用户{{ userString }}</b>
            </div>
        </div>
        <div class="MyNumber">
            <h3>我的会员</h3>
            <div class="NewPerson">
                <h3>新用户专享</h3>
                <p>有效期至2023.11.9</p>
            </div>
        </div>
        <div class="MyBenefits">
            <h4>我的权益</h4>
            <div>
                <img src="https://kano.guahao.cn/l1e159102456" alt="">
                <p>专家问诊优惠</p>
            </div>
            <div>
                <img src="https://kano.wedoctor.com/h3f895038210?token=NDczYjEyY2UyYTYyMzBiODQ0YmRhNGI3ZWM3MDU2MThfTUQ1COUSTOM"
                    alt="">
                <p>5元快速问诊</p>
            </div>
            <div>
                <img src="https://kano.wedoctor.com/Nq8885548106?token=MjgzY2M3YjQxODg4YzIyYzI0ZWJjYmRmMzdhYjI3YjZfTUQ1COUSTOM"
                    alt="">
                <p>甄选医生</p>
            </div>
            <div>
                <img src="https://kano.guahao.com/K4D349228277?token=ODVmM2IzYTdiMDIzODllNmRhMDY5ZjMwZDAzNGEwY2NfTUQ1COUSTOM"
                    alt="">
                <p>微医甄选</p>
            </div>
            <div>
                <img src="https://kano.wedoctor.com/0ep885543323?token=OGNmYzcxYTk2YjY4YTU2YzNhNjM4MDVlMmUwMjhlMmNfTUQ1COUSTOM"
                    alt="">
                <p>健康VIP社区</p>
            </div>
        </div>
        <h3>会员专区</h3>
        <div class="MembersArea">
            <div>
                <img src="../img/育儿指南.png" alt="" />
            </div>
            <div>
                <img src="../img/骨科康复.png" alt="" />
            </div>
            <div>
                <img src="../img/健康VIP.png" alt="" />
            </div>
            <div>
                <img src="../img/企业会员.png" alt="" />
            </div>
        </div>
        <h3>健康好物</h3>
        <div class="HealthGoods">
            <div>
                <img src="https://kano.guahao.com/QLV924143477?token=MTczOWI2ODI0ZDRjNGVlNDQwMTA5Njc4NzBmYjRjNmFfTUQ1COUSTOM&v=1.0" alt="" />
            </div>
            <div>
                <img src="https://kano.guahao.com/ela915762663?token=NjY5ODc2YmQxZGJlZjE4OTk0YWExZjMwMmNkZmM0YmFfTUQ1COUSTOM&v=1.0" alt="" />
            </div>
            <div>
                <img src="https://kano.guahao.com/cby904936455?token=YWMwOWFhZDQxMzg1YmJmZDExNzA2Y2FhNTc2ODA5ZTFfTUQ1COUSTOM&v=1.0" alt="">
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue';
const onClickLeft = () => history.back();
let userString = localStorage.getItem("user");
let avator = localStorage.getItem("img");

</script>

<style scoped lang="scss">
.NumberCenter {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;

   .Head {
        width: 100%;
        height: 1.3rem;
        background-color: #2073e8;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius:.3rem;
        border-bottom-right-radius:.3rem;
        display: flex;

       .Head-img {
            width: 1rem;
            height: 1rem;
            padding-left:.2rem;
            padding-top:.15rem;

            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }

       .Head-name {
            padding-top:.5rem;
            padding-left:.2rem;
            color: white;
        }
    }

   .MyNumber {
        width: 90%;
        height: 1.2rem;
        // background: rgb(255, 255, 255);
        margin-top:.2rem;
        margin-left: 5%;
        border-radius:.3rem;

        h3 {
            padding-top:.1rem;
            padding-left:.1rem;
        }

       .NewPerson {
            width: 100%;
            height:.7rem;
            background: orange;
            border-radius:.1rem;
            color: white;

            h3 {
                padding-left:.1rem;
            }

            p {
                padding-left:.1rem;
            }
        }
    }

   .MyBenefits {
        width: 90%;
        height: 2.8rem;
        background: rgb(255, 255, 255);
        margin-top:.2rem;
        margin-left: 5%;
        border-radius:.3rem;

        h4 {
            padding:.1rem;
        }

        div {
            width: 30%;
            height: 1rem;
            float: left;
            margin-left:.085rem;
            margin-top:.1rem;
            text-align: center;

            img {
                width:.5rem;
                height:.5rem;
                margin-top:.1rem;
            }
        }
    }

   .MembersArea {
        width: 90%;
        height: 2rem;
        background: rgb(255, 255, 255);
        margin-top:.2rem;
        margin-left: 5%;
        border-radius:.3rem;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;

        /* 单个盒子的样式 */
        div {
            display: inline-block;
            width: 1.5rem;
            height: 1.4rem;
            margin-right: 10px;
            margin-top: 0.3rem;

            img {
                width: 1.5rem;
                height: 1.4rem;
                border-radius: 0.1rem;
            }
        }

    }

   .HealthGoods {
        width: 90%;
        height: 2rem;
        background: rgb(255, 255, 255);
        margin-top:.2rem;
        margin-left: 5%;
        border-radius:.3rem;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;

        /* 单个盒子的样式 */
        div {
            display: inline-block;
            width: 1.5rem;
            height: 1.4rem;
            margin-right: 10px;
            margin-top: 0.3rem;

            img {
                width: 1.5rem;
                height: 1.4rem;
                border-radius: 0.1rem;
            }
        }
    }
    h3{
        padding-left:.3rem;
        padding-top:.2rem;
    }
}
</style>